<template>
  <div>
    <PageList>
      <template #header>
        <div style="width: 100%; overflow: hidden;">
          <div style="float: left;">平台设置</div>
        </div>
      </template>
      <template #filter>
        <el-form ref="RefForm" :model="formData" label-width="140px" status-icon>
          <el-form-item class="wid" label="平台IP地址">
            <el-input v-model="formData.serverIP" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid" label="端口">
            <el-input v-model="formData.serverPort" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item class="wid" label="当前设备序列号">
            <el-input v-model="formData.serialCode" class="wid" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- <el-form-item class="wid" label="当前工点">
            <el-tree
              ref="tree"
              class="wid"
              :data="data"
              :load="loadNode"
              show-checkbox
              node-key="id"
              highlight-current
              :props="defaultProps"
              @check-change="handleCheckChange"
            ></el-tree>
          </el-form-item> -->
          <el-form-item class="wid">
            <el-button type="primary" @click="sure">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { setting } from '@/api/api'
  export default {
    mixins: [listMixin],
    data() {
      return {
        // 当前设备序列号
        formData: {
          serverIP: '',
          serverPort: '',
          serialCode: ""
        },
        // 假数据
        // data: [{
        //   id: 1,
        //   label: '一级 1',
        //   name: '张三',
        //   list: [
        //     {
        //       id: 4,
        //       label: '二级 1-1',
        //       name: '张三1',
        //     }
        //   ],
        //   children: [{
        //     id: 4,
        //     label: '二级 1-1',
        //     name: '张三1',
        //     children: [{
        //       id: 9,
        //       label: '三级 1-1-1',
        //       name: '张三2',
        //     }, {
        //       id: 10,
        //       label: '三级 1-1-2'
        //     }]
        //   }]
        // }, {
        //   id: 2,
        //   label: '一级 2',
        //   children: [{
        //     id: 5,
        //     label: '二级 2-1'
        //   }, {
        //     id: 6,
        //     label: '二级 2-2'
        //   }]
        // }, {
        //   id: 3,
        //   label: '一级 3',
        //   children: [{
        //     id: 7,
        //     label: '二级 3-1'
        //   }, {
        //     id: 8,
        //     label: '二级 3-2'
        //   }]
        // }],
        // // 指定渲染哪些属性
        // defaultProps: {
        //   children: 'children',
        //   label: 'label'
        // }
      }
    },
    methods: {
      // 动态加载数据
      // loadNode(node, resolve) {
      //   if (node.level === 0) {
      //     return resolve([{ name: 'region1' }, { name: 'region2' }])
      //   }
      //   if (node.level > 3) return resolve([])

      //   var hasChild
      //   if (node.data.name === 'region1') {
      //     hasChild = true
      //   } else if (node.data.name === 'region2') {
      //     hasChild = false
      //   } else {
      //     hasChild = Math.random() > 0.5
      //   }

      //   setTimeout(() => {
      //     var data
      //     if (hasChild) {
      //       data = [{
      //         name: 'zone' + this.count++
      //       }, {
      //         name: 'zone' + this.count++
      //       }]
      //     } else {
      //       data = []
      //     }

      //     resolve(data)
      //   }, 500)
      // },
      // // 用户选中操作: 1: 一级; 2: 二级; 3: 三级
      // handleCheckChange(data, checked, indeterminate) {
      //   console.log(data, checked, indeterminate)
      // },
      // // 设置选中
      // setCheckedKeys() {
      //   this.$refs.tree.setCheckedKeys([3])
      // },
      // // 设置选中
      // setCheckedNodes() {
      //   this.$refs.tree.setCheckedNodes([{
      //     id: 5,
      //     label: '二级 2-1'
      //   }, {
      //     id: 9,
      //     label: '三级 1-1-1'
      //   }])
      // },
      // 获取默认数据
      async getList(query) {
        this.tableLoading = true
        try {
          const { data } = await setting('get', {}, false)
          this.formData = data
          // this.tableData = resData.map(item => {
          //   item.loadingEdit = false
          //   item.loadingDel = false
          //   return item
          // })
          // this.tableData = result
          console.log(data)
          // this.$nextTick(() => {
          //   this.$refs['RefListTable'].update({ page: this.pageIndex, count: total })
          //   this.tableLoading = false
          // })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      // 点击确定更新
      async sure() {
        try {
          const { data } = await setting('put', {id: this.formData.id, value: this.formData}, false)
          if (data.success == true) {
            this.getList()
          }
          // this.tableData = resData.map(item => {
          //   item.loadingEdit = false
          //   item.loadingDel = false
          //   return item
          // })
          // this.tableData = result
          // this.$nextTick(() => {
          //   this.$refs['RefListTable'].update({ page: this.pageIndex, count: total })
          //   this.tableLoading = false
          // })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .wid {
    width: 300px;
  }
</style>
